{% extends 'myadmin/base.html' %}
{% block main_body %}
<style>
    .table-box {
        overflow-x: auto;
        margin: 10px 0;
    }
    .dataTable {
        min-width: 1600px;
    }
    .dataTable th, .dataTable td {
        padding: 8px 12px;
        text-align: center;
    }
    .sortable {
        cursor: pointer;
    }
    .filter-group {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-bottom: 10px;
    }
    .label {
        display: inline-block;
        margin: 0 2px;
        padding: 2px 5px;
        border-radius: 3px;
        font-size: 12px;
    }
    .label-green {
        background-color: #4CAF50;
        color: white;
    }
    .label-blue {
        background-color: #2196F3;
        color: white;
    }
    .label-yellow {
        background-color: #FFC107;
        color: black;
    }
    /* 搜索框与按钮宽度一致样式 */
    .search-container {
        display: flex;
        align-items: center;
    }
    .search-container .form-control,
    .search-container .input-group-btn .btn {
        height: 34px;
        width: 50px; /* 统一宽度 */
        box-sizing: border-box;
    }
    .search-container .form-control {
        border-radius: 4px 0 0 4px;
        border-right: none;
        padding: 6px 12px;
    }
    .search-container .input-group-btn .btn {
        border-radius: 0 4px 4px 0;
        border-left: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<script>
    // 全选功能
    document.addEventListener('DOMContentLoaded', function() {
        const selall = document.getElementById('selall');
        const checkboxes = document.querySelectorAll('input[name="ids"]');
        
        selall.addEventListener('change', function() {
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });
    });
    function doDel(url) {
        if (confirm("确定删除该食物吗？")) {
            window.location.href = url;
        }
    }
</script>
<section class="content-header">
    <h1>食物总览 <small>食物列表</small></h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
        <li><a href="#">食物总览</a></li>
        <li class="active">食物列表</li>
    </ol>
</section>
<section class="content">
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">食物列表</h3>
        </div>
        <div class="box-body">
            <div class="filter-group">
                <!-- 新增按钮 -->
                <button type="button" class="btn btn-default">
                    <a href="{% url 'myadmin_foods_add' %}" style="color: inherit;"><i class="fa fa-plus"></i> 添加食物</a>
                </button>
                
                <!-- 类别筛选框 -->
                <form action="{% url 'myadmin_foods_index' 1 %}" method="get" class="form-inline">
                    <select name="category" class="form-control input-sm" onchange="this.form.submit()">
                        <option value="">所有类别</option>
                        {% for category in categories %}
                        <option value="{{ category.category_id }}" 
                                {% if selected_cid == category.category_id|stringformat:"i" %}selected{% endif %}>
                            {{ category.category_name }}
                        </option>
                        {% empty %}
                        <option value="">无类别数据（请先添加类别）</option>
                        {% endfor %}
                    </select>
                    
                    <!-- 搜索框（修改后） -->
                    <div class="input-group input-sm search-container" style="margin-left: 10px;">
                        <input type="text" name="keyword" class="form-control" placeholder="搜索食物名称" 
                               value="{{ request.GET.keyword|default:'' }}">
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </form>
            </div>
            <div class="table-box">
                <table class="table table-bordered table-striped dataTable">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="selall"></th>
                            <th class="sortable">
                                <a href="?sort=food_id&order={% if request.GET.sort == 'food_id' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    食物ID{% if request.GET.sort == 'food_id' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable">
                                <a href="?sort=food_name&order={% if request.GET.sort == 'food_name' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    食物名称{% if request.GET.sort == 'food_name' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th>所属类别</th>
                            <th class="sortable">
                                <a href="?sort=calories_per_100g&order={% if request.GET.sort == 'calories_per_100g' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    热量(大卡/100g){% if request.GET.sort == 'calories_per_100g' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable">
                                <a href="?sort=protein_per_100g&order={% if request.GET.sort == 'protein_per_100g' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    蛋白质(g){% if request.GET.sort == 'protein_per_100g' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable">
                                <a href="?sort=fat_per_100g&order={% if request.GET.sort == 'fat_per_100g' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    脂肪(g){% if request.GET.sort == 'fat_per_100g' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable">
                                <a href="?sort=carbs_per_100g&order={% if request.GET.sort == 'carbs_per_100g' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    碳水(g){% if request.GET.sort == 'carbs_per_100g' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable">
                                <a href="?sort=fiber_per_100g&order={% if request.GET.sort == 'fiber_per_100g' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    纤维(g){% if request.GET.sort == 'fiber_per_100g' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable">
                                <a href="?sort=sugar_per_100g&order={% if request.GET.sort == 'sugar_per_100g' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    糖分(g){% if request.GET.sort == 'sugar_per_100g' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable">
                                <a href="?sort=sodium_per_100g&order={% if request.GET.sort == 'sodium_per_100g' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    钠(mg){% if request.GET.sort == 'sodium_per_100g' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th>特性</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for vo in foodlist %}
                        <tr>
                            <td><input type="checkbox" name="ids" value="{{ vo.food_id }}"></td>
                            <td>{{ vo.food_id }}</td>
                            <td>{{ vo.food_name }}</td>
                            <td>
                                {% if vo.category %}
                                    {{ vo.category.category_name }}
                                {% else %}
                                    未分类
                                {% endif %}
                            </td>
                            <td>{{ vo.calories_per_100g }}</td>
                            <td>{{ vo.protein_per_100g|default:'-' }}</td>
                            <td>{{ vo.fat_per_100g|default:'-' }}</td>
                            <td>{{ vo.carbs_per_100g|default:'-' }}</td>
                            <td>{{ vo.fiber_per_100g|default:'0' }}</td>
                            <td>{{ vo.sugar_per_100g|default:'0' }}</td>
                            <td>{{ vo.sodium_per_100g|default:'0' }}</td>
                            <td>
                                {% if vo.is_vegetarian %}<span class="label label-green">素食</span>{% endif %}
                                {% if vo.is_vegan %}<span class="label label-blue">纯素</span>{% endif %}
                                {% if vo.is_gluten_free %}<span class="label label-yellow">无麸质</span>{% endif %}
                            </td>
                            <td>
                                <a href="{% url 'myadmin_foods_edit' vo.food_id %}" class="btn btn-xs btn-primary">编辑</a>
                                <a onclick="doDel('{% url 'myadmin_foods_delete' vo.food_id %}')" class="btn btn-xs btn-danger">删除</a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="13">暂无食物数据</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <!-- 分页 -->
            <div class="box-footer">
                <div class="box-tools pull-right">
                    <ul class="pagination">
                        <li><a href="{% url 'myadmin_foods_index' pIndex|add:-1 %}?{{ request.GET.urlencode }}">&laquo;</a></li>
                        {% for p in plist %}
                        <li {% if p == pIndex %}class="active"{% endif %}>
                            <a href="{% url 'myadmin_foods_index' p %}?{{ request.GET.urlencode }}">{{ p }}</a>
                        </li>
                        {% endfor %}
                        <li><a href="{% url 'myadmin_foods_index' pIndex|add:1 %}?{{ request.GET.urlencode }}">&raquo;</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}